<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>api测试</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
      .wrap{
        position: relative;
        width: 60%;
        margin: 10px auto;
        padding: 20px;
        background-color: #f7f7f7;
      }
      .item{
        display: flex;
        flex-direction: column;
      }
      .m-btn{
        margin-top: 20px;
        text-align: center;
      }
      .m-btn .btn{
        width: 150px;
        height: 40px;
        margin: 0 20px;
      }
      .content{
        position: relative;
        margin-top: 30px;
        padding: 20px;
        background-color: #fefefe;
      }
      .content .btn{
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 12px;
      }
      pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
      .string { color: green; }
      .number { color: darkorange; }
      .boolean { color: blue; }
      .null { color: magenta; }
      .key { color: red; }
    </style>
  </head>
  <body>

    <div class="wrap">
        <!-- <h2>api测试</h2>
        <hr>
        <p>
          <strong>说明：</strong>
          <ul>
            <li>使用jQuery的ajax方法提交，必须在http服务器下启动，不要双击打开</li>
            <li>暂时不能跨域访问</li>
            <li>输入的api，不要带域名和端口，必须以 ‘ / ’ 开头，结尾没有 ‘ / ’ </li>
            <li>token可以写在参数中</li>
            <li>参数必须是正确的json格式，注意属性名必须双引号</li>
          </ul>
        </p> -->
        <div class="item api">
            <h4 class="title">api接口：</h4>
            <input type="text" id="api" placeholder="输入api接口，请以/api/开头，如：/api/Report/allReport">
        </div>
        <div class="item token">
            <h4 class="title">token：</h4>
            <input type="text" id="token">
        </div>
        <div class="item param">
            <h4 class="title">参数：</h4>
            <textarea name="param" id="param" rows="5" placeholder='以对象{}形式输入参数，如：{"day": "2017-3-21"}'></textarea>
        </div>
        <div class="m-btn">
          <button class="btn btn-default j-submit j-getbtn">GET</button>
          <button class="btn btn-default j-submit j-postbtn">POST</button>
        </div>

        <div class="content">
          <button class="btn btn-default" id="format">格式化代码</button>
          <h5>结果输出：</h5>
          <p id="content"></p>
          <pre style="display: none" id="formatdata"></pre>
        </div>
    </div>




    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script>
      $(document).on('keydown', function (e) {
        // console.log(e.keyCode)
        if (e.keyCode == 34) {
          // console.log('enter')
          $('.j-postbtn').trigger('click')
          e.preventDefault()
          return
        }
        if (e.keyCode == 13) {
          // console.log('enter')
          $('.j-getbtn').trigger('click')
          return
        }
      })
      $('.j-submit').on('click', function (e) {
        var api = $('#api').val();
        if (api === '') { return }
        var token = $('#token').val();
        var param = $('#param').val() || '{}';
        var paramData = {};
        var type = $(this).text();
        try {
          paramData = JSON.parse(param)
          paramData.token = token
        } catch (e) {
          console.log(e)
          $('#content').html('- 输入的参数错误<br>'+e)
          return
        }
        $.ajax({
          url: api,
          type: type,
          data: paramData,
          dataType: 'json',
          success: function (data) {
            $('#formatdata').hide()
            console.log(data)
            $('#content').html(JSON.stringify(data))
          },
          error: function (xhr, error) {
            console.log(error)
          }
        });
        
      });
      $('#format').on('click', function () {
        var content = $('#content').html()
        content = JSON.parse(content)
        var result = syntaxHighlight(content)
        $('#content').html('')
        $('#formatdata').show().html(result)
      })
      function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
      }
    </script>

  </body>
</html>